<template>
	<view class="content">
		<view class="nav-box nav-box2">
			<view class="nav _df _jb _ac mb20">
				<view class="back">
					<image @click="back" src="@/static/img/index/backW.png" alt="" />
				</view>
			</view>
			<view class="title">
				医疗急救卡
			</view>
		</view>
		<view class="nav-box">
			<view class="nav _df _jb _ac mb20">
				<view class="back">
					<image @click="back" src="@/static/img/index/backW.png" alt="" />
				</view>
			</view>
			<view class="title">
				医疗急救卡
			</view>
		</view>
		<view class="con">
			<view class="item _df _ac _jb mb40">
				<view class="title title2" @click="showPop('name')" style="font-size: 56rpx;color: #000;">
					{{data.name?data.name:'姓名'}}
				</view>
				<view class="info _df _ac" @click="upload">
					<image class="photo" :src="host + data.photo" mode=""></image>
				</view>
				
			</view>
			
			<view class="item">
				<view class="title">
					血型
				</view>
				<view class="info _df _ac" @click="showPop('bloodType')">
					{{data.bloodType || '请输入'}}
				</view>
				
			</view>
			<view class="item" @click="showPop('allergyMedicine')">
				<view class="title">
					过敏药物
				</view>
				<view class="info _df _ac">
					{{data.allergyMedicine || '请输入'}}
				</view>
			</view>
			<view class="item" @click="showPop('chronicDisease')">
				<view class="title">
					慢性病
				</view>
				<view class="info _df _ac">
					{{data.chronicDisease || '请输入'}}
				</view>
			</view>
			<view class="item" @click="showPop('treatmentSituation')">
				<view class="title">
					用药及治疗情况
				</view>
				<view class="info _df _ac">
					{{data.treatmentSituation || '请输入'}}
				</view>
			</view>
			<view class="line">
				<view class="title">
					紧急联系人
				</view>
				<view class="info">
					提供紧急联系人信息，以便于紧急救援时医护人员能及时联系到您的亲友
				</view>
			</view>
			<view class="item" @click="showPop('emergentName')">
				<view class="title">
					姓名
				</view>
				<view class="info _df _ac">
					{{data.emergentName || '请输入'}}
				</view>
			</view>
			<view class="item" @click="showPop('emergentPhone')">
				<view class="title">
					电话
				</view>
				<view class="info _df _ac _jb">
					<span>{{data.emergentPhone || '请输入'}}</span>
					<view class="" @click.stop="callFn" v-if="data.emergentPhone">
						<u-icon style="z-index: 2;position: relative;"  name="phone" size="50"></u-icon>
					</view>
					
				</view>
			</view>
			<!-- <view class="item" @click="actionShow = true">
				<view class="title">
					与我关系
				</view>
				<view class="info _df _ac">
					{{data.emergentRelationship || '请选择'}}
					<image src="@/static/img/mine/myIcon2.png" mode=""></image>
				</view>
			</view> -->
		</view>
		<u-popup v-model="show" @close="popClose" :closeable="true" mode="center" border-radius="20" width="80%">
			<view class="popCon">
				<view class="title">
					{{popTitle}}
				</view>
				<view class="input-box">
					<u-input v-model="inputVal" :type="type=='treatmentSituation'?'textarea':'text'" :border="true" placeholder="请输入" :height="80" :clearable="true" />
					<view class="btn" @click="submit">
						提交
					</view>
				</view>
				
			</view>
		</u-popup>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
		<u-picker v-model="calendarShow" confirm-color="#FF4651" :params="params" @confirm="dateChange" mode="time"></u-picker>
		<!-- <u-calendar active-bg-color="#FF4651" v-model="calendarShow" mode="date" @change="dateChange"></u-calendar> -->
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				data:{
					  name: '',
					  photo: '',
					  bloodType: '',
					  allergyMedicine: '',
					  chronicDisease: '',
					  treatmentSituation: '',
					  emergentName: '',
					  emergentPhone: '',
					  emergentRelationship: '',
				},
				sex:'',
				host:null,
				action: config.host1 + '/app/common/upload',
				actionData: {
					oldFile: '',
					path:''
				},
				header: {
					authorization: ''
				},
				inputVal:'',
				popTitle:'修改昵称',
				type:'',
				show:false,
				actionList:[
					{
						text:'父亲',
						value:'父亲'
					},
					{
						text:'母亲',
						value:'母亲'
					},
					{
						text:'兄弟',
						value:'兄弟'
					},
					{
						text:'姐妹',
						value:'姐妹'
					}
				],
				actionShow:false,
				calendarShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			};
		},
		onLoad() {
			this.host = config.host1
			this.header.authorization = uni.$_getToken()
			this.getUser()
		},
		onShow() {
			
		},
		methods:{
			callFn(){
				uni.makePhoneCall({
					phoneNumber: this.data.emergentPhone 
				});

			},
			back(){
				uni.navigateBack(-1)
			},
			toAid(){
				uni.navigateTo({
					url:'/pages/tabbar/mine/firstaid'
				})
			},
			dateChange(e){
				this.data.birthday = e.year + '-' +e.month+'-' +e.day
				this.submit()
			},
			actionClick(index){
				this.data.sex = this.actionList[index].text
				this.submit()
			},
			showPop(e){
				this.show = true
				this.type = e
				switch(e){
					case 'name':
						this.inputVal = this.data.name
						this.popTitle = '姓名'
						break;
					case 'bloodType':
						this.inputVal = this.data.bloodType
						this.popTitle = '血型'
						break;
					case 'allergyMedicine':
						this.inputVal = this.data.allergyMedicine
						this.popTitle = '过敏药物'
						break;
					case 'chronicDisease':
						this.inputVal = this.data.chronicDisease
						this.popTitle = '慢性病'
						break;
					case 'treatmentSituation':
						this.inputVal = this.data.treatmentSituation
						this.popTitle = '用药及治疗情况'
						break;
					case 'emergentName':
						this.inputVal = this.data.emergentName
						this.popTitle = '紧急联系人姓名'
						break;
					case 'emergentPhone':
						this.inputVal = this.data.emergentPhone
						this.popTitle = '紧急联系人电话'
						break;
				}
			},
			getUser() {
				let that = this;
				uni.$_get({
					url: "get-user",
					that: that,
					success(res) {
						let _data = res.data;
						if (res.code == 0) {
							that.data.photo = _data.photo
							that.data.name = _data.name
							that.data.bloodType = _data.bloodType
							that.data.allergyMedicine = _data.allergyMedicine
							that.data.chronicDisease = _data.chronicDisease
							that.data.treatmentSituation = _data.treatmentSituation
							that.data.emergentName = _data.emergentName
							that.data.emergentPhone = _data.emergentPhone
							that.data.emergentRelationship = _data.emergentRelationship
						}
			
					},
					fail(err) {
			
					},
				});
			},
			popClose(){
				this.show = false
				this.inputVal = ''
			},
			validatePhoneNumber(phoneNumber) {
			    var pattern = /^1[3456789]\d{9}$/; // 匹配以1开头的11位数字
			    return pattern.test(phoneNumber);
			},
			submit() {
				if(this.type == 'allergyMedicine'){
					this.data.allergyMedicine = this.inputVal
				}else if(this.type == 'name'){
					this.data.name = this.inputVal
				}else if(this.type == 'bloodType'){
					this.data.bloodType = this.inputVal
				}else if(this.type == 'chronicDisease'){
					this.data.chronicDisease = this.inputVal
				}else if(this.type == 'treatmentSituation'){
					this.data.treatmentSituation = this.inputVal
				}else if(this.type == 'emergentName'){
					this.data.emergentName = this.inputVal
				}else if(this.type == 'emergentPhone'){
					
					let isPhone = this.validatePhoneNumber(this.inputVal)
					if(!isPhone){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}else{
						this.data.emergentPhone = this.inputVal
					}
					
				}
				let that = this;
				uni.$_post({
					url: "edit-user",
					that: that,
					params: that.data,
					success(res) {
						let _data = res.data;
						if (res.code == 0) {
							
							that.popClose()
							
						}
			
					},
					fail(err) {
			
					},
				});
			},
			upload(){
				// this.$refs.uUpload.upload();
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.action, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header:that.header,
							formData: that.actionData,
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data,123);
								let _data = JSON.parse(uploadFileRes.data)
								that.data.photo = _data.data
								that.submit()
							}
						});
					}
				});
			},
			onSuccess(res) {
				this.data.photo = res.data
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary{
		background-color: #FF4651;
		border-color: #FF4651;
	}
	.content{
		min-height: 100vh;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		background: #FF575B url(@/static/img/mine/ylBg1.png) no-repeat right -30rpx top -10rpx / 278rpx 164rpx;
	}
	.nav-box{
		padding: 90rpx 30rpx 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 33;
		box-sizing: border-box;
		background: #FF575B url(@/static/img/mine/ylBg1.png) no-repeat right -30rpx top -10rpx / 278rpx 164rpx;
		.nav{
			// height: 80rpx;
		}
		.back{
			// position: absolute;
			// top: 50%;
			// left: 0;
			// transform: translateY(-50%);
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.right{
			width: 80rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 6rpx;
			image{
				width: 37rpx;
				height: 27rpx;
			}
		}
		.hover{
			background-color: #F2F6FE;
		}
		.title-box{
			text-align: center;
			margin: 0 auto;
			
			.time{
				font-size: 28rpx;
				font-family: $uni-font-family-Medium;
				color: #fff;
			}
		}
		.title{
			font-size: 60rpx;
			font-family: $uni-font-family-Bold;
			color: #fff;
		}
		
	}
	.nav-box2{
		position: relative;
		margin-bottom: 60rpx;
		padding: 90rpx 0 0;
	}
.con{
	padding: 50rpx 40rpx;
	background-color: #fff;
	border-radius: 30rpx;
	.item{
		margin-bottom: 30rpx;
		.info{
			margin: 0 0 0 auto;
			font-size: 34rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
			line-height: 46rpx;
			.photo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.rightIcon{
				width: 14rpx;
				height: 24rpx;
				margin-left: 30rpx;
			}
			image{
				width: 19rpx;
				height: 32rpx;
				margin-left: 15rpx;
			}
		}
		
		.title{
			font-size: 24rpx;
			color: #919191;
			margin-bottom: 6rpx;
			font-family: $uni-font-family-Medium;
		}
		.title2{
			font-size: 34rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
		}
	}
	.line{
		padding: 30rpx 0;
		border-top: 1rpx solid #eee;
		.title{
			font-size: 40rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
			margin-bottom: 6rpx;
		}
		.info{
			font-size: 24rpx;
			color: #666;
			line-height: 30rpx;
			font-family: $uni-font-family-Medium;
		}
	}
	
	
}
.popCon{
	position: relative;
	min-height: 400rpx;
	.title{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		background-color: #f4f4f4;
		font-family: $uni-font-family-Heavy;
	}
	.input-box{
		padding: 40rpx 40rpx;
	}
	.btn{
		margin-top: 70rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		font-family: $uni-font-family-Heavy;
		border-radius: 35rpx;
		background-color: #ff575b;
	}
}
</style>
